<template>
  <div class="shop-cart primary-blue">
    <div class="shop-cart-float flex-center" style="">
      <div class="shop-cart-float-count">
        <i class="el-icon-shopping-cart-full"></i><span> &nbsp;0&nbsp;{{$t('ShopCartText1')}} </span>
      </div>
      <el-button>
        <span>$0.00</span>
      </el-button>
    </div>
    <el-drawer
        v-model="isOpen"
    >
      <template #header>
        <div class="flex-start shop-cart-drawer-title"><i class="el-icon-shopping-cart-full"></i>
          <div><h3> 0&nbsp;{{$t('ShopCartText1')}}  </h3>
            <p class="site-name">{{$t('ShopCartText2')}} </p></div>
        </div>
      </template>
<!--      <div class="shop-cart-drawer-list no-cart">-->
<!--        <img src="@/assets/images/no-cart-item.jpg" alt="">-->
<!--        <div>{{$t('ShopCartText3')}}</div>-->
<!--        <div class="go-shopping">{{$t('ShopCartText4')}}</div>-->
<!--      </div>-->
      <div class="shop-cart-drawer-list">
        <div class="shop-cart-drawer-content flex-start">
          <label class="el-checkbox is-checked">
            <span class="el-checkbox__input is-checked">
              <span class="el-checkbox__inner"></span>
              <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value=""></span><!---->
          </label>
          <img src="https://argos-shop-online.s3.amazonaws.com/pc/gp/B07V3DF1QP/51G8uW4FLLL._AC_SL1010_.jpg" alt=""><!---->
          <div>
            <p class="tit-cart"> ANBOTA 儿童狮子连体衣万圣节服装长颈鹿动物角色扮演女孩羊毛一件式睡衣拉链开合 </p>
            <p class="tit-cart"><span> 颜色:金狮奖 </span><span> 大小:140 适合身高 4'5"-4'9" </span></p>
            <el-input-number v-model="num" size="small" />
          </div>
          <span class="price"> $32.18 </span>
          <i class="el-icon-delete" style="cursor: pointer;"></i>
        </div>
      </div>
      <div class="shop-cart-drawer-buy flex-center">
        <el-button type="primary">
          <span> {{$t('ShopCartText5')}} $0.00 </span>
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import { ref } from 'vue'
const isOpen = ref(false)
const num = ref(1)
</script>
<style scoped>
.shop-cart-float {
  width: 108px;
  height: 76px;
  background-color: var(--color-main);
  border-radius: 40px 0 0 40px;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  padding-left: 15px;
  cursor: pointer;
  z-index: 999;
}
.shop-cart-float-count {
  font-size: 12px;
  color: var(--color-white);
  margin-bottom: 10px;
}
.shop-cart-float-count .el-icon-shopping-cart-full {
  font-size: 16px;
}
.shop-cart-float .el-button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 67px;
  height: 23px;
  color: var(--color-main);
  background-color: var(--color-white);
  border: 1px solid var(--color-white);
  padding: 0;
}
:deep(.el-button--primary) {
  color: #fff;
  background-color: var(--color-main);
  border-color: var(--color-main);
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--color-main);
  border-color: var(--color-main);
}
:deep(.el-drawer__header) {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 14px;
  margin-bottom: 15px;
}
:deep(.el-input-number--small) {
  width: 130px;
  line-height: 26px;
  border-width: 0;
}
:deep(.shop-cart-drawer-content .el-input-number--small) {
  width: 80px;
}
:deep(.el-input__wrapper){
  box-shadow: none;
}
:deep(.el-drawer__body){
  padding: 0;
}
</style>